<template>
  <div>
    <el-dialog
      :title="title"
      v-model="addDialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <div>
        <el-form label-position="right" label-width="60px" :model="infoForm">
          <el-form-item label="id">
            <el-input v-model="infoForm.id"></el-input>
          </el-form-item>
          <el-form-item label="name">
            <el-input v-model="infoForm.name"></el-input>
          </el-form-item>
          <el-form-item label="link">
            <el-input v-model="infoForm.link"></el-input>
          </el-form-item>
          <el-form-item label="doc">
            <el-input v-model="infoForm.doc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('handleClose:show')">取 消</el-button>
          <el-button type="primary" @click="handleClose(title)"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed } from "vue";
import { createLink, changeLink } from "../../network/api/friend";
import { ElMessage } from "element-plus";
export default {
  props: {
    dialogVisible: Boolean,
    form: Object,
    title: String,
  },
  setup(props, { emit }) {
    const addDialogVisible = computed({
      get: () => props.dialogVisible,
      set: () => emit("handleClose:show"),
    });
    const infoForm = computed({
      get: () => props.form,
    });
    const handleClose = (title) => {
      if (title === "添加") {
        createLink(infoForm.value).then((res) => {
          if (res.status === 200) {
            emit("handleClose:show", "success");
            ElMessage.success("添加成功");
          }
        });
      }
      if (title === "修改") {
        changeLink(infoForm.value).then((res) => {
          if (res.status === 200) {
            emit("handleClose:show", "success");
            ElMessage.success("修改成功");
          }
        });
      }
    };
    return {
      addDialogVisible,
      handleClose,
      infoForm,
    };
  },
};
</script>